<!--{% load staticfiles %}-->
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}{% endblock %}</title>
    <style>
    		/*
    			320px
					480px
					600px
					768px
					900px
					1200px
    		*/
    		body {
    				background: 	#fff;
    				margin: 			0;
    				padding: 			0;
    				font-size:		100%;
    				font-family:	helvetica;
    		}
    		
    		#title {
    				font-size:		10em;
    				text-align:		center;
    				margin:				50px;
    		}
    		
    		#navigation {
    				width: 				100%;
    		}
    		
    		#navigation .item {
    				padding: 			10px;
    				float:				left;
    				height:				200px;
    				width:				200px;
    				text-align:		center;
    				border: 1px solid #eee;
    				margin: 5px;
    		}
    		
    		#navigation .item .name {
    				display: none;
    				visibility: hidden;
    		}
    		
    		#navigation .item .icon {
    				width:				180px;
    		}
    		
    		#content {
    				clear:				both;
    				background:		#fff;
    				width:				90%;
    				margin:				0 auto;
    				padding:			10px;
    		}
    		
    		@media screen and (max-width: 900px) { 	
    				#navigation .item {
    						float:		none;
    						height:		auto;
    						width:		80%;
    						text-align:left;
    						margin:		5px auto;
    				}
    				
    				#navigation .item .icon {
    						width:		30px;
    				}
    				
    				#navigation .item .name {
    						display: inline;
    						visibility: visible;
    				}
    		}
    </style>
</head>
<body>
		<div id="title">gerits</div>
		<div id="navigation">
				<div class="item">
						<img class="icon" src="{% static "images/nav.png" %}" alt="Nav" />&nbsp;
						<span class="name">{{ navigation }}</span>
				</div>
				<div class="item">
						<img class="icon" src="{% static "images/nav.png" %}" alt="Nav" />&nbsp;
						<span class="name">{{ navigation }}</span>
				</div>
				<div class="item">
						<img class="icon" src="{% static "images/nav.png" %}" alt="Nav" />&nbsp;
						<span class="name">{{ navigation }}</span>
				</div>

		</div>

		<div id="content">
    <!--{% block content %}{% endblock %}-->Content
    </div>
</body>
</html>